<!--
 * @Description: 施工进度总计划实施管理审批信息(复制src\views\project\lists\approvalDetails.vue修改而来)，为了支持app端所以单独写内容，PC端需要外层包裹弹窗
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-01-05 10:59:48
 * @LastEditTime: 2023-01-05 14:18:04
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\components\ApprovalDetailPage.vue
-->
<template>
  <a-tabs
    v-model="key"
    type="card"
    class="mb20"
  >
    <a-tab-pane
      key="3"
      tab="当前完成流程"
    >
      <img
        style="width: 100%"
        :src="flowChart3"
      >
      <s-table
        ref="ApprovetableCurrent3"
        bordered
        size="default"
        row-key="key"
        :columns="columnApproveCurrent"
        :data="loadDataCurrent3"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :show-pagination="false"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <template
          slot="opinions"
          slot-scope="text"
        >
          <ellipsis
            :length="30"
            tooltip
          >
            {{ text }}
          </ellipsis>
        </template>
        <template
          slot="userName"
          slot-scope="text"
        >
          <ellipsis
            :length="50"
            tooltip
            placement="right"
          >
            {{ text }}
          </ellipsis>
        </template>
      </s-table>
    </a-tab-pane>
    <a-tab-pane
      key="4"
      tab="历史完成流程"
    >
      <s-table
        ref="Approvetable4"
        bordered
        size="default"
        row-key="key"
        :columns="columnApprove"
        :data="loadData4"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :show-pagination="true"
        @expand="expand4"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <template
          slot="formData.opinions"
          slot-scope="text"
        >
          <ellipsis
            :length="30"
            tooltip
          >
            {{ text }}
          </ellipsis>
        </template>
        <a-spin
          slot="expandedRowRender"
          slot-scope="record"
          :spinning="record.spinning"
          style="margin: 0"
        >
          <a-table
            bordered
            row-key="id"
            :columns="columnApproveDetail"
            :data-source="record.description"
            :pagination="false"
          />
        </a-spin>
      </s-table>
    </a-tab-pane>
  </a-tabs>
</template>
<script>
import { getProcessNodeList, getProcInstByBusiness, getFlowChart } from '@/api/process'
import { getOrgEmployeesListBy } from '@/api/commons'
import { STable } from '@/components'
import { Ellipsis } from '@/components'
import JosnBig from 'json-bigint'
import { getCurrentProcessList } from '@/utils/requestWithParams.js'
import { columnApproveCurrent, columnApprove, columnApproveDetail } from '../model.js'

export default {
  name: 'ApprovalDetailPage',
  components: {
    STable,
    Ellipsis
  },
  props: {
    // 弹窗时显示隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 业务id
    businessId: {
      type: String,
      default: ''
    }
  },
  data() {
    this.columnApprove = columnApprove
    this.columnApproveCurrent = columnApproveCurrent
    this.columnApproveDetail = columnApproveDetail
    return {
      approveInfos: [],
      spinning: false,
      key: '',
      flowChart3: '',
      loadDataCurrent3: () => {
        return getCurrentProcessList.call(this, { businessId: this.businessId })
      },
      loadData4: (parameter) => {
        parameter.businessId = this.businessId
        return getProcInstByBusiness(parameter).then((res) => {
          const data = res.data
          const userIds = []
          data.forEach((item) => {
            item.spinning = false
            userIds.push(item.startUser)
            item.endTime = item.endTime || '进行中'
            item.durationTime = item.durationTime || '进行中'
            item.description = []
          })
          if (userIds?.length) {
            return getOrgEmployeesListBy({ userIds, delete: true }).then((employees) => {
              this.flowRequesting = false
              res.data.forEach((r) => {
                employees.data.some((e) => {
                  if (e.userId === r.startUser) {
                    r.userName = e.name
                    return true
                  }
                })
              })
              return res
            })
          }
        })
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('confirm')
    },
    getFlowChart() {
      this.spinning = true
      console.log(this.businessId)
      if (this.businessId) {
        getFlowChart(this.businessId)
          .then((res) => {
            this.spinning = false
            if (res.code === 200) {
              this.flowChart3 = 'data:image/png;base64,' + res.data
            }
          })
          .catch(() => {
            this.spinning = false
          })
      }
    },
    expand4(expanded, record) {
      if (expanded) {
        this.getProcessNodes(record.procInstId, record, 4)
      }
    },
    getProcessNodes(e, record, index) {
      record.spinning = true
      getProcessNodeList({ procInstId: e, pageNo: 1, pageSize: 100 })
        .then((res) => {
          if (res.code === 200) {
            const data = res.data
            const userIds = data.map((d) => {
              if (d.formData) {
                d.formData = JosnBig.parse(d.formData)
              }
              return d.assignee
            })
            userIds?.length &&
              getOrgEmployeesListBy({ userIds, delete: true })
                .then((employees) => {
                  record.spinning = false
                  res.data.forEach((r) => {
                    employees.data.some((e) => {
                      if (e.userId === r.assignee) {
                        r.userName = e.name
                        return true
                      }
                    })
                  })
                  this.$refs.Approvetable4.localDataSource.forEach((i) => {
                    if (i.procInstId == e) {
                      data.forEach((item) => {
                        item.auditResult = item.formData.reject === 'true' ? '审批不通过' : item.formData.reject === 'false' ? '审批通过' : ''
                      })
                      i.description = data
                    }
                  })
                })
                .catch((e) => {
                  console.log(e)
                  record.spinning = false
                })
          }
        })
        .catch(() => {
          console.log(e)
          record.spinning = false
        })
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$nextTick(() => {
          this.key = '3'
          this.getFlowChart()
          if (this.$refs.ApprovetableCurrent3) {
            this.$refs.ApprovetableCurrent3.refresh()
          }
        })
      } else {
        this.key = ''
        this.flowChart = ''
        if (this.$refs.Approvetable4) {
          this.$refs.Approvetable4.localDataSource = []
        }
        if (this.$refs.ApprovetableCurrent3) {
          this.$refs.ApprovetableCurrent3.localDataSource = []
        }
      }
    }
  }
}
</script>
<style>
.approval-dialog {
  position: relative;
  z-index: 9999999999;
}
</style>